<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2022-10-24 16:01:22
 * @LastEditors: qingyang
 * @LastEditTime: 2022-11-14 16:15:51
-->
<template>
  <div class="file-wrap">
    <template v-if="isReadonly">
      <el-row v-for="(item, index) in localFileList" :key="index">
        <div class="file-item" :key="item.id" @click="handleClick(item)">
          <div class="file-item-name">{{ item.name }}</div>
        </div>
      </el-row>
    </template>
    <g-upload
      v-else
      :action="uploadFilePostUrlV3"
      :postParams="{ scope: 'inventory', needRename: 'false', groupType: 'AD_FILL_TASK' }"
      v-model:fileList="localFileList"
      accept=".jpg,.png,.jpeg,.pdf,.zip,.rar,.7z"
      @success="handleUploadSuccess"
      previewByApi
      :limit="1000"
      multiple
      :fileSizeLimit="50"
    >
      <template #default="{ loading: btnLoading }">
        <el-button :loading="btnLoading"
          ><CIcon type="c-xian-shangchuan" class="g-mr4"></CIcon>上传文件</el-button
        >
      </template>
      <template #tip>
        <div class="g-ml10" style="margin-top: 5px">
          <span class="g-font-12n3"
            >支持 JPG、PNG、JPEG、PDF 以及 RAR、ZIP 等格式文件，大小不超过50M。</span
          >
        </div>
      </template>
    </g-upload>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, computed, defineEmits, PropType } from 'vue';
import { GUpload } from '@/components/GUpload';
import { uploadFilePostUrlV3 } from '@/apis/common/common';
import { useMessage } from '@/hooks/useMessage';
import type { IFileItem } from './types';

const props = defineProps({
  isReadonly: {
    type: Boolean,
    default: false
  },
  fileList: {
    type: Array as PropType<IFileItem[]>,
    default: () => {
      return [];
    }
  }
});
const { createMessage } = useMessage();
const emit = defineEmits(['update:fileList']);
const handleUploadSuccess = (file: any) => {
  createMessage.success('上传成功');
  // uploadRef.value?.clearFiles();
};
const handleDel = (item: IFileItem) => {
  const index = localFileList.value.findIndex(n => n.id === item.id);
  if (index > -1) {
    localFileList.value.splice(index, 1);
  }
};
const handleClick = (item: IFileItem) => {
  item.url && window.open(item.url);
};
const localFileList = computed({
  get: () => {
    return props.fileList;
  },
  set: val => {
    emit('update:fileList', val);
  }
});
</script>
<style lang="scss" scoped>
.file-wrap {
  // border-top: 1px solid #ebeef5;
  // padding: 0 48px 48px 0;
  :deep(.g-upload) {
    width: 552px;
  }
}
.file-item {
  background: #f6f9fa;
  border-radius: 2px;
  min-width: 440px;
  height: 32px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  .file-item-name {
    &:hover {
      color: $themeColor;
    }
    padding: 0 32px;
    min-width: 440px;
    position: relative;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #51596c;
    &:before {
      content: ' ';
      left: 12px;
      top: 8px;
      position: absolute;
      width: 16px;
      height: 16px;
      background-image: url(~@/assets/images/icon_file.png);
      background-size: 16px 16px;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }
  .file-item-close {
    right: 12px;
    top: 8px;
    position: absolute;
  }
}
.el-row + .el-row {
  margin-top: 10px;
}
:deep(.el-upload-list__item-name) {
  display: block;
  text-align: left;
}
</style>
